<template>
  <div>
    <van-nav-bar left-arrow style="background: blue" class="header_bar">
      <template #left>
        <van-icon
          name="arrow-left"
          color="#fff"
          size="20"
        />
      </template>
      <template #title>
        <span style="color: #fff">编辑</span>
      </template>
      <template #right>
        <van-icon name="wap-home-o" color="#fff" size="1.8rem" />
      </template>
    </van-nav-bar>

    <div class="header">
      <van-field required v-model="user" label="客户姓名" input-align="right" />
      <van-field
        required
        v-model="tel"
        type="tel"
        label="联系方式"
        input-align="right"
      />
    </div>

    <div>
      <van-field v-model="education" label="学历" input-align="right" />
      <van-field v-model="age" type="number" label="年龄" input-align="right" />
      <van-field v-model="gender" label="性别" input-align="right" />
      <van-field v-model="city" label="所属城市" input-align="right" />
      <van-field v-model="company" label="公司名称" input-align="right" />
      <van-field v-model="work" label="职务" input-align="right" />
    </div>

    <div class="foots">
      <van-button
        class="van_btn"
        type="info"
        size="normal"
        round
        block
        color="blue"
        @click="btn"
        >确认修改</van-button
      >
    </div>
  </div>
</template>

<script>
import { getModifyCust } from "@/request/api";
export default {
  data() {
    return {
      user: this.$route.query.val.custName,
      tel: this.$route.query.val.telephone,
      education: this.$route.query.val.education,
      age: this.$route.query.val.age,
      gender: this.$route.query.val.sex,
      city: this.$route.query.val.cityName,
      company: this.$route.query.val.company,
      work: this.$route.query.val.position,
      id: this.$route.query.val.id,
    };
  },
  methods: {
    querys(){
         getModifyCust({
        // 客户名称
        custName: this.user,
        // 所属地市
        cityName: this.city,
        // 公司名称
        company: this.company,
        // 职务
        position: this.work,
        // 联系方式
        telephone: this.tel,
        // 学历
        education: this.education,
        // 性别
        sex: this.gender,
        // 年龄
        age: this.age,
        // 客户id
        id: this.id,
      }).then((res) => {
        if (res.errCode == 0) {
          console.log(res.data);
        }
      });
    },
    btn() {
      this.querys()
      // this.$router.push('/customerdatas')
    },
  },
  created() {
    console.log(this.$route.query.val);
    this.querys();
  },
};
</script>

<style scoped>
.header {
  margin: 0.6rem auto;
}
.foots {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
}
.van_btn {
  width: 90%;
  margin: 0 auto;
}
</style>